.u-status-icon {
  display: inline-flex;
  align-items: center;

  &-dot {
    position: relative;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: var(--color);
    z-index: 0;
    &.wave {
      &::before {
        content: '';
        .wave-circle();
        animation: circleAnimationIn 2s ease-out;
        animation-iteration-count: infinite;
      }
      &::after {
        content: '';
        .wave-circle();
        animation: circleAnimationOut 2s ease-out;
        animation-iteration-count: infinite;
      }
    }
  }

  .wave-circle {
    position: absolute;
    z-index: 1;
    width: 16px;
    height: 16px;
    top: -4px;
    left: -4px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid var(--color);
    box-shadow: 1px 1px 10px var(--color);
  }
}

@keyframes circleAnimationIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  25% {
    transform: scale(0.3);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes circleAnimationOut {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  25% {
    transform: scale(0.3);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.3);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}
